<template>
	
<div  class="sidebar1 sidebarBox1" >
			<el-menu
							mode="horizontal"
							class="el-menu-demo"
							:collapse="collapse"
							:default-active="active"
							background-color="#fff"
							active-text-color="#409eff"
							text-color="#000"
							>
							<div class="wrapper" ref="wrapper" >
								   <div class="home" @click="goHome()">
										<el-menu-item
											:index="0+''">
											<div class="name-icon"><img class="logo" src="@/assets/logo.png" /></div>
										</el-menu-item>
									 </div>
								<template v-for="item in layoutData" >
									<div  :key="item.id" v-if="!item.permissionRespChildList || item.permissionRespChildList ==null || item.permissionRespChildList.length == 0" class="menu-item2">
											<el-menu-item
											:index="item.id">
											<div class="name-icon"><i :class="item.icon"></i><span>{{item.name}}</span></div>
										</el-menu-item>
									</div>
								<el-submenu v-else :key="item.id" :index="item.id+''" >
									<template slot="title">
										<div class="name-icon">
											<i :class="item.icon"></i>
										  <span>{{item.name}}</span>
										</div>
									</template>
									<div style="display:flex;flex-wrap:wrap" class="sidebar2">
										<template  v-for="val in item.permissionRespChildList">
											<div @click="getFunctional(val)" :key="val.id" class="menu-item3">
												<el-menu-item
												:index="val.id+''">
												<div class="name-icon1">
													<span>{{val.name}}</span>
												</div>
											</el-menu-item>
										</div>
										</template>
									</div>
									
									<!-- <div style="display:flex;flex-wrap:wrap" class="sidebar2">
										<Menu :layoutData="item.permissionRespChildList" />
									</div> -->
								</el-submenu>
							</template>
							</div>
						</el-menu>
       </div>
</template>

<script>
	import {baseUrl} from '@/tools'
	import Menu from "./Menu"
	export default {
		name: 'pc',
		components:{
			Menu,
		},
		 props: {
			layoutData: Array
		},
		data() {
			return {
      collWidth: 'width:300px',
      active: '/iot/pile/list',
      collapse:true
			}
		},
		computed: {
		},
		created(){
			console.log('layoutData----------', this.layoutData)
			
		},
		mounted(){
		},
		methods: {
			getFunctional(item){
				if(this.$route.path!==item.url)
				this.$store.commit('setactivePath',item.url)
					this.$router.push(item.url)
			},
			goHome(){
				let url = '/home'
				this.$store.commit('setactivePath',url)
					this.$router.push(url)
			}
		},
		
		
		
	}
</script>
<style scoped>

.el-menu--horizontal .el-menu .el-menu-item{
  background: #1b244d !important;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    border-radius: 4px;
    /* height: 36px; */
    color: #dddddd !important;
}

.sidebar2{
    width: 400px;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #dbdbdb;
    padding: 20px;
}
.menu-item2{
	display: flex;
  flex-wrap: wrap;
}
.menu-item3{
	display: flex;
  flex-wrap: wrap;
	width: 48%;
}

.name-icon{
	  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
		/* border-right: 1px solid #e9e9e9; */
		width: 88px;
}
.name-icon1{
	display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper{
	display: flex;
	padding: 20px 0;
}

.el-menu--horizontal {
	border-bottom: none !important;
}
.el-menu-demo {
	top: 0 !important
}
.el-menu--collapse{
	width: 90%;
}


.el-submenu__title{
	background: #ffffff ;
	color: #000 !important;
	/* height: 66px; */
}
.el-submenu{
	border-right: 1px solid #e9e9e9;
}

.menu_page {
  position: fixed;
  top: 71px;
  left: 0;
  min-height: 100%;
  background-color: #324057;
  z-index: 99;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar1{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.menu-item2{
  display: flex;
  flex-wrap: wrap;
}
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-menu-item, .el-submenu__title {
  	height: 72px;
    /* height: 62px ; */
    line-height: 42px  !important;
}
.el-menu-item [class^=el-icon-]{
font-size: 25px;
}
.el-submenu [class^=el-icon-]{
	font-size: 23px;
}
.el-menu-vertical-demo {
  width: 80px;
}

.el-submenu .el-menu-item {
  min-width: 180px;
}


a {
  text-decoration: none;
}
.el-menu-item-group{
	width: 100%;
}
.el-submenu__title i {
	color: #626263;
}





.logo{
	width: 70px;
}
.home{
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f6f6f6;
}
</style>
